<template>
	<view class="page">
		<u-navbar title="商品详情" border @leftClick="$utils.back()" placeholder />
		<view class="body">
			<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
				:default-page-no="1" :default-page-size="10">
				<view class="baColor_fff">
					<SwiperComponent v-if="!loading" :list="list" />
					<view style="height: 462rpx;" class="Skeleton" v-else></view>
					<view class="chargeBox  " v-if="!loading">
						￥{{detail.charge}}
					</view>
					<view v-else style="height: 60rpx;" class=" Skeleton " />
					<view class="titleBox   baColor_fff">
						<template v-if="!loading">
							<view style="flex: 1;font-size: 35rpx;">
								{{detail.title}}
							</view>
							<view class="shareBox">
								<button style="padding: 0;border: none;" type="default" :plain='true' open-type="share">
									<u-icon labelSize='28rpx' labelPos='bottom' label="分享" size="50rpx"
										name="share-square"></u-icon>
								</button>
							</view>
						</template>
						<view v-else style="height: 60rpx;" class=" Skeleton mt20" />
					</view>
				</view>
				<view class="addressBox  mt20 baColor_fff">
					<template v-if="!loading">
						<view class="color_aaa mr20">
							发货
						</view>
						<view>
							<view>
								快递包邮
							</view>
							<view class="color_aaa ">
								付款后48小时发货
							</view>
						</view>
					</template>
					<template v-else>
						<view class="Skeleton mr20" style="width:100rpx;height: 30rpx;" />
						<view>
							<view class="Skeleton " style="width:200rpx;height: 30rpx;" />
							<view class="Skeleton mt20" style="width:300rpx;height: 30rpx;" />
						</view>
					</template>
				</view>
				<view class="mt20 baColor_fff" style="padding: 20rpx;">

					<template v-if="appraiseLoading">
						<view class="Skeleton mr20" style="width:100rpx;height: 30rpx;" />
						<view class="appraise" v-for="item in 5" :key="item">
							<view>
								<view>
									<view style="width: 80rpx;height: 80rpx;border-radius: 100%;"
										class="Skeleton mr20" />
									<view class="Skeleton " style="width:100rpx;height: 30rpx;" />
								</view>
								<view class="Skeleton " style="height: 30rpx;" />
							</view>
							<view>
								<view class="Skeleton mt20" v-for="item2 in 5" :key="item2" style="height: 30rpx;" />
							</view>
						</view>
					</template>
					<view v-else>
						<view class="color_aaa" style="display: flex;align-items: center;">
							<view style="flex: 1;">
								商品评价
							</view>
							<u-icon name="arrow-right" @click="show=true"></u-icon>
						</view>
						<view class="appraise" v-for="item in appraise" :key="item.id">
							<view>
								<view>
									<u-avatar :src="item.user.avatar" size="80rpx"></u-avatar>
									<text style="margin-left: 10rpx;">{{item.user.nick_name}}</text>
								</view>
								<text>{{item.updated_at | changeTime}}</text>
							</view>
							<view>
								<view>
									{{item.content}}
								</view>

								<view style="margin: 10rpx 0;" v-if="item.photos.length">
									<u-album :urls="item.photos" keyName="url"></u-album>
								</view>
							</view>
						</view>
						<empty v-if="!appraise.length" />
					</view>
				</view>
				<view class="mt20 baColor_fff" style="padding: 20rpx;">
					<template v-if="!loading">
						<view class="color_aaa ">
							商品详情
						</view>
						<view class="mt20">
							<u-parse :content="detail.description"></u-parse>
						</view>
					</template>
					<template v-else>
						<view class="Skeleton mr20" style="width:100rpx;height: 30rpx;" />
						<view class="Skeleton mt20" style="height: 30rpx;" v-for="item in 30" :key='item' />
					</template>
				</view>
			</z-paging>
		</view>
		<view class="footer" v-if="!loading">
			<u-icon name="home" labelPos="bottom" label="店铺" @click="$utils.back()"></u-icon>
			<u-icon name="chat" labelPos="bottom" label="评价" @click="show=true"></u-icon>
			<u-icon name="server-man" labelPos="bottom" label="客服" @click="customer"></u-icon>
			<view style="width: 470rpx;">
				<u-button text="立即购买" shape="circle" size="normal " color="rgb(57, 117, 198)" :hairline="true"
					@click="jumpPay"></u-button>
			</view>
		</view>
		<view>
			<appraise :show='show' @close='show=false' :p_id='id' @getAppraise='getAppraise'
				@appraiseLoadingChange='appraiseLoading=false' />
		</view>
	</view>
</template>

<script>
	import SwiperComponent from './components/swiper'
	import appraise from './components/appraise'
	export default {
		components: {
			SwiperComponent,
			appraise
		},
		data() {
			return {
				appraiseLoading: true,
				appraise: [],
				token: uni.getStorageSync('token'),
				show: false,
				list: [],
				id: null,
				data: [],
				detail: null,
				loading: true,
			}
		},
		onShareAppMessage() {
			return {
				title: this.detail.title,
				path: '/product/detail?id=' + this.id,
				imageUrl: this.detail.thumb
			};
		},
		//2.分享到朋友圈
		onShareTimeline() {
			return {
				title: this.detail.title,
				path: '/product/detail?id=' + this.id,
				imageUrl: this.detail.thumb
			};
		},
		onLoad(op) {
			this.id = op.id
		},
		methods: {
			getAppraise(e) {
				console.log(e)
				this.appraise = e
			},
			customer() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfcf0dd26a0d00b8bc5'
					},
					corpId: 'ww3e3767611d7cce8b',
					success(res) {
						console.log('res', res)
					},
					fail(err) {
						console.log('err', err)
					}
				})

			},
			jumpPay() {
				if (!this.token) {
					setTimeout(() => {
						this.$utils.judgeToken()
					}, 500)
					uni.$u.toast('未登录请先登录')
					return
				}
				this.$utils.navigateTo({
					url: '/product/pay?id=' + this.id
				})
			},
			query(page, size) {
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.Product.Detail(this.id).then(res => {
					uni.hideLoading()
					this.$refs.paging.complete([1])
					this.detail = res.data.product
					this.list.push({
						video: this.detail.video.url,
						url: this.detail.video.thumb,
						type: 'video',
						duration: this.detail.video.duration
					})

					this.list.push(...this.detail.images.map(item => {
						return {
							url: item.url,
							type: 'image'
						}
					}))
					this.loading = false
				}).catch(err => {
					uni.hideLoading()
					uni.$u.toast(err.data.message)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.appraise {
		font-size: 26rpx;
		margin: 0 20rpx;
		padding-top: 10rpx;

		>view:first-child {
			display: flex;
			align-items: center;
			justify-content: space-between;

			>view {
				display: flex;
				align-items: center;
			}
		}

		>view:last-child {
			padding: 10rpx 0;
			margin-left: 90rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}
	}

	.page {
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.body {
		margin-top: 10rpx;
		flex: 1;
		overflow: hidden;
	}

	.footer {
		align-items: center;
		display: flex;
		box-sizing: border-box;
		padding: 10rpx 40rpx;
		justify-content: space-between;
		font-size: 26rpx;
		width: 100%;
	}

	.chargeBox {
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		color: red;
		font-size: 40rpx;

	}

	.titleBox {
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		padding-bottom: 20rpx;
		display: flex;
	}

	.addressBox {
		box-sizing: border-box;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		padding-bottom: 20rpx;
		display: flex;

		view {
			font-size: 28rpx;
		}
	}

	.color_aaa {
		color: #aaa;

	}





	.baColor_fff {
		background-color: #fff;
	}
</style>